<template>
  <!--患者信息 Header -->
  <a-modal
    :open="open"
    width="840px"
    class=""
    destroy-on-close
    cancel-text="关闭"
    :ok-button-props="{ hidden: true }"
    :title="title"
    centered
    @ok="onCancel"
    @cancel="onCancel"
  >
    <div class="patient-info-header">
      <div class="flex justify-between items-center">
        <a-avatar :size="48" :src="avatarMan" />
        <div class="text-xl font-semibold w-[80px] truncate ml-2">{{ formState?.brName || '-' }}</div>
        <div class="w-[50px]">{{ formState?.brXb || '-' }}</div>
        <div class="w-[50px]">{{ formState?.brAge ? formState?.brAge : '-' }}</div>
        <div class="w-[100px]">{{ formState?.brMob || '-' }}</div>
        <div class="flex-1">{{ formState?.brJtdz || '-' }}</div>
      </div>
    </div>

    <div class="w-full mt-2">
      <BaseTable
        :data-source="tableData"
        class="h-[320px]"
        height="230"
        :pagination="{ total: page.total }"
        :loading="loading"
        :columns="columns"
        @change="({ current, pageSize }) => queryList(current, pageSize)"
      >
        <template #bodyCell="{ column, index, record }">
          <template v-if="column.dataIndex === 'xh'">
            {{ index + 1 }}
          </template>
          <template v-if="column.dataIndex === 'yyrq'">
            {{ record.yyrq + record.yysj }}
          </template>
        </template>
      </BaseTable>
    </div>
  </a-modal>
</template>
<script setup>
import { ref, watch } from 'vue'
import avatarMan from '@/assets/images/avatar-man.png'

const emit = defineEmits(['update:open', 'success'])
import { post } from '@/utils/request'

const props = defineProps({
  open: {
    type: Boolean,
    default: false
  },
  rowData: {
    type: Object,
    default: () => ({})
  },
  type: {
    type: String,
    default: '服务项目'
  },
  title: {
    type: String,
    default: ''
  }
})
const tableData = ref([])
const loading = ref(false)
const page = ref({
  total: 0
})
const columns = ref([])
const servecolumns = ref([
  { title: '序号', dataIndex: 'xh', width: '50' },
  { title: '服务项目', dataIndex: 'itemName' },
  { title: '理疗总次数', dataIndex: 'zsl', align: 'right' },
  { title: '已用次数', dataIndex: 'yysl', align: 'right' },
  { title: '剩余次数', dataIndex: 'sysl', align: 'right' }
])
const consumecolumns = ref([
  { title: '序号', dataIndex: 'xh', width: '50' },
  { title: '日期', dataIndex: 'yyrq' },
  { title: '服务项目', dataIndex: 'itemName' },
  { title: '数量', dataIndex: 'sl', align: 'right' },
  { title: '医师', dataIndex: 'empName' }
])
const queryList = async (pageNum = 1, pageSize = 10) => {
  loading.value = true
  const dataUrl = props.type === '服务项目' ? '/course/statisticalQuery/getDictServiceItemList' : 'course/statisticalQuery/getCourseAppointmentList'
  const { data, code, total } = await post(dataUrl, {
    bh: formState.value.bh,
    brId: formState.value.brId,
    pageNum: pageNum,
    pageSize: pageSize
  })
  loading.value = false
  if (code === 0) {
    tableData.value = data
    page.value.total = total
  }
}

const formState = ref({})

watch(
  () => props.open,
  (val) => {
    if (val) {
      if (props.rowData?.bh) {
        formState.value = { ...props.rowData }
        columns.value = props.type === '服务项目' ? servecolumns.value : consumecolumns.value
        queryList()
      }
    } else {
      onReset()
    }
  }
)
const onReset = () => {
  formState.value = {}
  tableData.value = []
  columns.value = []
  page.value.total = 0
}
const onCancel = () => {
  emit('update:open', false)
}
</script>
<style lang="less" scoped>
.patient-info-header {
  padding: 8px 12px;
  // color: var(--primary-color);
  background-color: var(--secondary-color);
  border-radius: 5px;
  :deep(.ant-badge-count) {
    top: auto;
    right: 6px;
    bottom: 0;
    background-color: var(--primary-color);
    box-shadow: none;
  }
}
</style>
